<template>
<div>
  <div style="min-height: 200px; width: 100%;">
<!--    <img class="h-img" src="../assets/bg-top1.png">-->
  </div>
  <div class="container" style="width: 100%">
    <div class="list-header">
      <div class="menu-div menu-nochoose">
        <span>推荐</span>
      </div>
        <div v-for="t in CONTRIBUTE_TYPE" @click="chooseType(t)" :class="contributeType === t.key ? 'menu-div menu-choose' : 'menu-div menu-nochoose'" :key="t.key">
          <span>{{t.value}}</span>
        </div>
      <div>
        <i class="fa fa-caret-left"></i>
        <i class="fa fa-caret-right"></i>
      </div>
      <div>
        <span class="menu-more">更多</span>
      </div>
    </div>

    <hr class="split-line"/>

    <RecommendAcc :img-list="imgList"/>
    <div class="list-header">
      <div class="menu-div-2 menu-nochoose">
        <span>电音工程</span>
      </div>
      <div class="menu-choose" style="width: 25%;">
        <span>MelodicDubStep</span>
      </div>
      <div class="menu-nochoose" style="width: 18%">
        <span>Color bass</span>
      </div>
      <div class="menu-div-2 menu-nochoose">
        <span>FutureHouse</span>
      </div>
      <div class="space1">

      </div>
    </div>
    <hr class="split-line"/>


   <video-card/>



  </div>
</div>
</template>

<script>
import Login from "@/components/Login";
import VideoCard from "@/components/VideoCard";
import RecommendAcc from '../components/RecommendAcc.vue';
export default {
  name: "Index",
  components: {VideoCard, RecommendAcc, Login},
  data: function () {
    return {
      contributeType: CONTRIBUTE_TYPE.ACCOMPANY.key,
      contributeTitle: CONTRIBUTE_TYPE.ACCOMPANY.value,
      imgList: ["1", "2", "3", "4", "5" ],
      CONTRIBUTE_TYPE: CONTRIBUTE_TYPE,
      step: 1,
    }
  },
  methods: {
    chooseType: function (t) {
      this.contributeType = t.key;
      this.contributeTitle = t.value;
    }
  }
}
</script>

<style scoped>
.menu-div {
  width: 13%;
  text-align: center;
}
.menu-div-2 {
  width: 15%;
  text-align: center;
}

.h-img {
  position: absolute;
  top: 0;
  width: inherit;
  z-index: -1;
}
.list-header {
  width: 100%;
  height: 50px;
  display: flex;
}
.split-line {
  margin-top: -5px;
  border: 4px solid #CDC7C7;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}
.menu-nochoose {
  text-align: center;
  font-family: PingFang, sans-serif;
  font-size: 22px;
  font-weight: normal;
  line-height: 34px;
  letter-spacing: 0em;
  color: #959595;
  /*text-align: center;*/
}
.space {
  width: 50%;
}
.space1 {
  width: 30%;
}
.fa-caret-left, .fa-caret-right {
  margin-right: 10px;
  line-height: 34px;
  font-size: 22px;
  color: #959595;
}
.menu-more {
  font-family: PingFang, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 34px;
  letter-spacing: 0em;
  margin-right: 100px;
  color: #959595;
}
.menu-choose {
  text-align: center;
  font-family: PingFang, sans-serif;
  font-size: 22px;
  font-weight: normal;
  line-height: 34px;
  letter-spacing: 0em;
  color: #000000;
  /*border-bottom: 4px solid #634E4E;*/
}

</style>